import React, { Component } from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'
import './index.css'

export default class index extends Component {

  static propTypes = {
    getSearchData:PropTypes.func.isRequired
  }

  getSearch = async ()=>{
    /* 深层次的解构赋值 keyWordElement就是这个DOM value对应的就是DOM的值  再加一个:keyWord 就是对这个进行重新赋名 */ 
    const {keyWordElement:{value:keyWord}} = this
    this.props.getSearchData({status:1})
    // 连续解构赋值 + 重命名
    let res = await axios.get(`https://api.github.com/search/users?q=${keyWord}`)

    if(res.status === 200){
      this.props.getSearchData({status:3,users:res.data.items})
    }else{
      this.props.getSearchData({status:2})
    }
  }

  render() {
    return (
      <div className="headers">
        <div className="searchTitle" >Search Github Users</div>
        <div className="InputArea">
          <input ref={c=>this.keyWordElement=c} type="text"/> <button onClick={this.getSearch}>Search</button>
        </div>
      </div>
    )
  }
}
